<template>
  <div class="container">
    <van-row>
      <van-col span="4" class="left">
        <van-sidebar>
          <van-sidebar-item v-for="(item,index) in category" :title="item.name" v-bind:key="index"
                            @click="click_item(item._id)">
          </van-sidebar-item>
          <!--                    <van-sidebar-item title="标签名 2"  @click="test"/>-->
          <!--          <van-sidebar-item title="标签名 3"  @click="click_item(3)"/>-->
        </van-sidebar>
      </van-col>
      <van-col span="18" offset="2" class="right">

        <van-cell v-for="(item,index) in dataList" v-bind:key="index" use-label-slot>
          <!--          产品的名称-->
          <view slot="title">
            <view class="van-cell-text">{{item.name}}</view>
          </view>

          <view slot="label">
            <view class="van-cell-text">{{item.price}} ￥</view>
          </view>
          <!--
              这里如何让我的值动态修改呢
              1.通过getters 函数获得 :  在mounted 可以显示 在 标签里面无法显示
              2.直接获得orderCount的属性:  值不更新 (测试修改值会更新 两层map 不更新)
              3.直接弄一层map 试一试   getOrderAndCount  只是获取第一次的初值  我后面添加的订单冒得
              4.重新建立一个orderAndCount  问题解决
           -->
          <van-stepper :value="getOrderAndCount[item._id]" ref="stepper" slot="right-icon" min="0" max="99"
                       @plus="addOrder({id:item._id,price:item.price,name:item.name})" @minus="subOrder(item._id)"/>
        </van-cell>
      </van-col>
    </van-row>

  </div>
</template>

<script>
  import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'

  export default {
    // name:"index",
    components: {},
    data() {
      return {
        category: [],
        dataList: []
      }
    },
    created() {

    },
    computed: {
      ...mapState(['order', "desk"]),
      ...mapGetters(['getDesk', 'getOrder', "getOrderCountById", 'test', 'getOrderAndCount',"getOrderAndCount","getTotalPrice"]),
    },
    mounted() {
        // console.log(this.isNumber("sss44s"))
      this.init();
    },
    methods: {
      init: function () {
        //获取 菜单分类
        const db = wx.cloud.database({env: 'jkoala-98c74'});
        db.collection('category')
          .get().then(res => {
          console.log("获得菜单数据")
          console.log(res.data)
          this.category = res.data
        });
        //获取第一个菜类
        db.collection('foods').where({
          category: '1'
        }).get().then(
          res => {
            console.log("获得分类为的数据：" + 1);
            console.log(res.data);
            this.dataList = res.data;
          }
        );
        console.log("desk: " + this.getDesk)
        //获得已点的订单数
        wx.cloud.callFunction({
          // 云函数名称
          name: 'test',
          // 传给云函数的参数
          data: {_id:this.getDesk},
        }).then(res => {
            let result = res.result.list[0].order[0]
            console.log(result)
            let tempOrder = {}
            let tempOrderAndCount = {};
            let tempTotalPrice = 0;
          for( let key in result ){
             if(this.isNumber(key)){
               // console.log("key:" + key)
               tempOrder[key] = result[key]
               tempOrderAndCount[key] = result[key].count;
             }
             if(key === "totalPrice")
             {
               tempTotalPrice = result[key]
             }
          }
          this.setOrder(tempOrder)
          this.setTotalPrice(tempTotalPrice);
          this.setOrderAndCount(tempOrderAndCount)
        }).catch(console.error)
      },
      isNumber(val) {
        var regPos = /^[1-9]\d*$/; //非负浮点数
        if(regPos.test(val)) {
          return true;
        } else {
          return false;
        }
      },
    ...mapMutations(['addOrder', 'subOrder',"setOrder","setOrderAndCount","setTotalPrice"]),
    click_item(id) {
      //还要修改货物的数量
      this.orderAndCount = this.getOrderAndCount;
      // 通过id 获取 菜数
      const db = wx.cloud.database({env: 'jkoala-98c74'});
      db.collection('foods').where({
        category: id
      }).get().then(
        res => {
          console.log("获得分类为的数据:" + id);
          console.log(res.data);
          this.dataList = res.data;
        }
      );
      this.$forceUpdate();
    },
      //绑定价格


  }
  }
</script>

<style lang="less">
  .left {

  }

  .right {

  }
</style>
